<template>
	<div id="login">
		<img class="logo" src="../../../build/logo.png" width="80%" height="100px" alt="" />
		<form action="">
			<div>
				<label for="userphone">+86 <span class="iconfont icon-xiala"></span>&nbsp;&nbsp;| </label>
				<input name="userphone" autocomplete="off" type="tel" v-model="userPhone" placeholder="请输入手机号" />
			</div>
			<div v-if="boyChecked == true">
				<label for="proUserphone">+86 <span class="iconfont icon-xiala"></span>&nbsp;&nbsp;| </label>
				<input name="proUserphone" autocomplete="off" type="tel" v-model="proUserphone" placeholder="请输入保护者手机号" />
			</div>
			<div class="sex-box">
				<label for="sex">性别：</label>
				<div class="sex-head">
					<input name="sex" type="radio" value="0" v-bind:class="[boyChecked ? 'iconBlue' : '', 'iconfont', 'icon-nansheng']" />
					<input name="sex" type="radio" value="1" v-bind:class="[girlChecked ? 'iconPink' : '', 'iconfont', 'icon-nvsheng']" />
				</div>
			</div>
			<div>
				<input type="tel" autocomplete="off" v-model="authCode" placeholder="请输入验证码" />
				<span class="get-code" @click="sendCode">获取验证码</span>
			</div>
			<button type="button" @click="login">登录</button>
		</form>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui';
	export default {
		name: 'login',
		data() {
			return {
				userPhone: '',
				proUserphone: '',
				authCode: '',
				getCode: '',
				jobName: '',
				girlChecked: true,
				boyChecked: false
			}
		},
		computed: {
			gender: function(){
				if(this.girlChecked == true)
					return 1
				else if(this.boyChecked == true)
					return 0
			}
		},
		methods:{
			sendCode(){
//				this.$store.dispatch('askAtuCode')
				let params = new URLSearchParams()
				params.append('phone',this.userPhone)
				this.$http.post('/sendCode',params).then(res => {
					if(res.code == 200 && res.errorMessage == null){
						Toast('验证码已发送')
						this.getCode = res.response.codeNum;
						this.jobName = res.response.jobName
					}else
						Toast(res.errorMessage)
				}).catch( error => {
					console.log(error)
				})
			},
			login(){
				let params = new URLSearchParams()
				params.append('phone',this.userPhone)
				params.append('gender',this.gender)
				params.append('jobName',this.jobName)
				params.append('otherPhone',this.proUserphone)
				if(this.getCode == this.authCode){   //判断验证码是否正确
					params.append('code',this.authCode)
					this.$http.post('/login',params).then(res => {
						if(res.code == 200 && res.errorMessage == null){
							//跳转
							this.$router.push({path: '/myInfo',query: {title:this.$route.meta.title,userToken:res.userToken}})
							let obj = {'userToken':res.userToken,'gender':res.gender,'friend':res.friend,'isAudit':res.isAudit};
							obj = JSON.stringify(obj);
							window.localStorage.setItem('info',obj);
	//						obj = JSON.parse(window.localStorage.getItem('info'));    //获取对象
						}else{
							Toast(res.errorMessage);
							if(res.code == 5 && res.errorMessage == '保护对象未注册'){
								//注册
							}
						}
						console.log(res)
					}).catch( error => {
						console.log(error)
					})
				}else
					Toast('验证码输入错误')
			}
		},
		mounted(){
			console.log(this.gender)
		}
//		created() {
//			//登录
//			this.$store.dispatch('$_post',{
//				url: 'http://www.mobox.site:8083/app/user/login',
//				data: {}
//			})
//		}
	}
</script>

<style scoped>
	.logo{
		padding: .2rem;
	}
	form{
		width: 86%;
		height: auto;
		margin-left: 7%;
	}
	form > div{
		height: .8rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-bottom: 1px solid #dedede;
		padding: .1rem 0 .06rem;
	}
	form > div > label{
		width: 22%;
		line-height: .72rem;
		padding: 0;
		text-align: left;
	}
	form > div > input,
	.sex-head{
		height: .68rem;
		width: 70%;
		border: none;
	}
	input[type="radio"]{
		appearance: none;
		-webkit-appearance: none
	}
	.sex-head{
		text-align: left;
	}
	.iconfont{
		font-size: .65rem;
	}
	.iconfont.icon-nvsheng,
	.iconfont.icon-nansheng{
		color: #cdcdcd;
	}
	.iconfont.icon-nvsheng{
		font-size: .73rem;
		margin-left: .6rem;
	}
	.iconfont.icon-xiala{
		font-size: .32rem;
	}
	span.get-code{
		color: #fc72a6;
		border: none;
		background: rgba(0,0,0,0);
		font-size: .32rem;
		line-height: .72rem;
	}
	button[type=button]{
		width: 100%;
		text-align: center;
		height: .8rem;
		line-height: .8rem;
		color: #ffeded;
		background: #fca6af;
		border: 1px solid #fca6af;
		margin-top: 1rem;
		border-radius: .4rem;
		font-size: .36rem;
	}
	.iconPink{
		color: #fc72a6!important;
	}
	.iconBlue{
		color: #72bdfc!important;
	}
</style>